<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" disabled type="button" id="buyButton" onclick="getPath()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var seckillId;
    $(function(){
        seckillId = getQueryString("seckillId");
        initGood();
        initUser();//获取远程是否已经登录.后面消息通知需要用户的信息.
    });
    function initGood(){
        $.ajax({
            url:'http://localhost:9000/seckill/seckillGood/find?seckillId='+seckillId,
            type:"GET",
            xhrFields: { withCredentials: true },//withCredentials: true表示在发送跨域请求的时候需要把cookie信息带上.
            success:function(data){
                if(data.code==200){
                    renderGood(data.data);
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    function renderGood(good){
        $("#goodName").html(good.goodName);
        $("#goodImg").prop("src",good.goodImg);
        $("#startDate").html(good.startDate);
        $("#goodPrice").html(good.goodPrice);
        $("#seckillPrice").html(good.seckillPrice);
        $("#stockCount").html(good.stockCount);
        renderTime(good.startDate,good.endDate);
    }
    var remainStartSeconds;//距离开始还有多久（秒）
    var remainEndSeconds;//距离结束还有多久（秒）
    //展示目前处于哪个阶段？秒杀还没开始，秒杀进行中，秒杀已经结束
    var timer;
    function renderTime(sDate,eDate){
        var startTime = new Date(sDate);
        var endTime = new Date(eDate);
        var now = new Date();
        //  startTime = 2020.2.6 09:00   ===>毫秒值
        //   endTime = 2020.2.6 10.00
        //  now  =    2020.2.6 08:00     ===>毫秒值

        remainStartSeconds = parseInt((startTime.getTime()-now.getTime())/1000);
        remainEndSeconds =parseInt((endTime.getTime()-now.getTime())/1000);
        timer = window.setInterval(showSeckillTip,1000)
    }
    //根据remainStartSeconds，remainEndSeconds来判断处于哪个阶段
    function showSeckillTip(){
        remainStartSeconds--;
        remainEndSeconds--;
        if(remainStartSeconds > 0){
            //还没有开始
            $("#seckillTip").html("距离秒杀开始还有:"+remainStartSeconds+"秒");
        }else{
            //正在进行中
            //已经结束了.
            if(remainEndSeconds>0){
                //说明秒杀还没有结束
                $("#seckillTip").html("秒杀进行中");
                $("#buyButton").prop("disabled",false);
            }else{
                //说明秒杀已经结束
                $("#seckillTip").html("秒杀已经结束");
                $("#buyButton").prop("disabled",true);
                window.clearInterval(timer);//取消浏览器的倒计时定时器
            }
        }
    }
    function initUser(){
        $.ajax({
            url:'http://localhost:9000/member/token/getCurrent',
            type:"GET",
            xhrFields: { withCredentials: true },//withCredentials: true表示在发送跨域请求的时候需要把cookie信息带上.
            success:function(data){
                if(data.code==200){
                    renderUser(data.data);
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    var user;
    var uuid;
    function renderUser(u){
        if(u){
            user = u;
            uuid = getUuid(user.id);
            //当用户登录了，才有必要把图形验证码展示出来。
            $("#verifyCodeImg").show();
            $("#verifyCode").show();
            initVerifyCodeImg();
        }else{
            //没有登录。
            $("#userTip").show();
        }
    }
    function getPath(){
        if(!user){
            layer.msg("请先登录");
            return;
        }
        $.ajax({
            url:'http://localhost:9000/seckill/path/getPath',
            type:"POST",
            data:{uuid:uuid,verifyCode:$("#verifyCode").val()},
            xhrFields: { withCredentials: true },//withCredentials: true表示在发送跨域请求的时候需要把cookie信息带上.
            success:function(data){
                if(data.code==200){
                    doSeckill(data.data);
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    var socket;
    function doSeckill(path){
        $.ajax({
            url:'http://localhost:9000/seckill/order/'+path+'/doSeckill',
            type:"POST",
            data:{seckillId:seckillId,uuid:uuid},
            xhrFields: { withCredentials: true },//withCredentials: true表示在发送跨域请求的时候需要把cookie信息带上.
            success:function(data){
                if(data.code==200){
                    if(!socket){
                        socket = createScoket(uuid);
                    }
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    function initVerifyCodeImg(){
        //get,容易浏览器的缓存
        $("#verifyCodeImg").prop("src","http://localhost:9000/seckill/verifyCode/getVerifyCode?uuid="+uuid+"&timestamp="+new Date().getTime());
    }
</script>
</body>
</html>